<template>
	<view class="outerView">
		<view class="viewList" v-for="(item,index) in list">
			<view class="viewL" v-if="item.type=='满减券'">
				<view class="money">￥{{item.preferentialMoney}}</view>
				<view class="rule">满{{item.triggerMoney}}元可用</view>
			</view>
			<view class="viewL" v-if="item.type=='折扣券'">
				<view class="money" style="padding: 0;">{{item.discount}}折</view>
			</view>
			<view class="line"></view>
			<view class="viewR">
				<view class="title" v-if="item.source==0">通用所有店铺均可使用</view>
				<view class="title" v-if="item.source==1">仅限{{item.shop.name}}使用</view>
				<view class="rBottom">
					<view class="date">{{item.start}}至{{item.end}}</view>
					<button @click="getCoupons(item.id)">领取</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryParam: {
					pageNum: 1,
					pageSize: 10,
					status: 0,
				},
				list: [],
				total: 0,
				requestFlag: false,
				getCoupon: false
			}
		},
		methods: {
			//领取优惠券
			getCoupons(id) {
				this.getCoupon = true;
				uni.request({
					url: 'http://localhost:7000/business/couponReal/' + getApp().globalData.loginUser.id + '/' +
						id,
					method: 'PUT',
					header: {
						authorization: getApp().globalData.token
					},
					success: (resp) => {
						console.log(resp);
						if (resp.data.code == 200) {
							uni.showToast({
								title: '领取成功',
								icon: 'none'
							})
							this.getCoupon = false;
						} else {
							uni.showToast({
								title: '您已领取',
								icon: 'none'
							})
						}
					},
					fail: (resp) => {}
				})
			},
			//获取优惠券
			getList() {
				this.requestFlag = true;
				uni.request({
					url: 'http://localhost:7000/business/couponReal/list',
					data: this.queryParam,
					method: 'GET',
					header: {
						authorization: getApp().globalData.token
					},
					success: (resp) => {
						if (resp.data.code == 200) {
							console.log(resp);
							this.list = [...this.list, ...resp.data.rows];
							this.total = resp.data.total;
							this.requestFlag = false;
						} else {
							uni.showToast({
								title: '服务器繁忙',
								icon: 'none'
							})
						}
					},
					fail: (resp) => {}
				})
			},

		},
		onLoad() {

		},
		onShow() {
			this.queryParam.pageNum = 1;
			this.queryParam.pageSize = 10;
			this.list = [];
			this.getList()
		},
		onReachBottom() {
			console.log(this.requestFlag);
			if (this.requestFlag) {
				return;
			}
			if (this.queryParam.pageNum * 10 >= this.total) {
				uni.showToast({
					title: '没有更多数据了',
					icon: "none"
				});
				return;
			}
			this.queryParam.pageNum = this.queryParam.pageNum + 1;
			this.queryParam.pageNum = 1;
			this.queryParam.pageSize = 10;
			this.list = [];
			this.getList();
			uni.showToast({
				title: '正在加载中....',
				icon: "none"
			})
		}
	}
</script>

<style lang="scss">
	.outerView {
		height: 100%;
		background-color: #fff;
	}

	.viewList {
		display: flex;
		align-items: center;
		background-color: #F8F8F8;
		margin: 10rpx 5rpx;
		border-radius: 10px;
	}

	.viewL {
		left: 14px;
		top: 88px;
		width: 115px;
		height: 94px;
		line-height: 39px;
		border-radius: 10px;
		background-color: rgba(29, 111, 255, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 28px;
		text-align: center;
		font-family: Roboto;
		border: 1px solid rgba(187, 187, 187, 1);

		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		align-content: center;
		margin: 30rpx;
	}

	.money {
		padding-top: 30rpx;
	}

	.rule {
		left: 33px;
		top: 155px;
		width: 76px;
		height: 19px;
		line-height: 19px;
		color: rgba(255, 255, 255, 1);
		font-size: 13px;
		text-align: left;
		font-family: PingFangSC-regular;
		padding-bottom: 30rpx;
	}

	.line {
		width: 1rpx;
		height: 150rpx;
		background-color: #999;
	}

	.viewR {
		width: 480rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	.title {
		left: 153px;
		top: 106px;
		width: 154px;
		height: 19px;
		line-height: 19px;
		color: rgba(68, 68, 68, 1);
		font-size: 13px;
		text-align: left;
		font-family: PingFangSC-regular;
		padding-bottom: 30rpx;
	}

	.rBottom {
		display: flex;
		height: 38rpx;
	}

	.date {
		left: 153px;
		top: 155px;
		width: 145px;
		height: 26px;
		line-height: 26px;
		color: rgba(234, 23, 3, 1);
		font-size: 11px;
		text-align: left;
		font-family: PingFangSC-regular;
	}

	button {
		width: 65px;
		height: 26px;
		line-height: 26px;
		border-radius: 4px;
		background-color: rgba(0, 132, 255, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 14px;
		text-align: center;
		font-family: Roboto;
		padding-left: 0;
		padding-right: 0;
	}
</style>